import React, { Component } from "react";

// 一切皆组件
// react默认是histroy模式
// react默认是模糊匹配, 加上exact可以变成精准匹配

// vue路由默认排他性路由，react5版本路由默认是包容性路由

// 如果项目要使用路由，那么必须在最外面添加BrowserRouter组件
// 只有在BrowserRouter内部的地方，才能使用和路由相关的内容

// Link就是用来做url跳转的a标签,它也有to属性

// Route用来存放切换的内容
import { Link, Route, Switch } from "react-router-dom";

class Home extends Component {
  render() {
    return <div>这是home页面</div>;
  }
}
class About extends Component {
  render() {
    return <div>这是about页面</div>;
  }
}

class App extends Component {
  render() {
    return (
      <>
        <h2>react-router-v5-basic</h2>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
        </Switch>
      </>
    );
  }
}

export default App;
